<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage product</title>
<link rel="stylesheet" href="Styles/reset.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="Styles/style.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="Styles/invalid.css" type="text/css"
	media="screen" />

<link rel="stylesheet" href="Styles/manageProduct.css" type="text/css"
	media="screen" />

<script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>



<script type="text/javascript">
	$(document).ready(function() {
		$('.content-box .content-box-content div.tab-content').hide(); // Hide the content divs
		$('ul.content-box-tabs li a.default-tab').addClass('current'); // Add the class "current" to the default tab
		$('.content-box-content div.default-tab').show(); // Show the div with class "default-tab"

		$('.content-box ul.content-box-tabs li a').click( // When a tab is clicked...
		function() {
			$(this).parent().siblings().find("a").removeClass('current'); // Remove "current" class from all tabs
			$(this).addClass('current'); // Add class "current" to clicked tab
			var currentTab = $(this).attr('href'); // Set variable "currentTab" to the value of href of clicked tab
			$(currentTab).siblings().hide(); // Hide all content divs
			$(currentTab).show(); // Show the content div with the id equal to the id of clicked tab
			return false;
		});

		$(".close").click(function() {
			$(this).parent().fadeTo(400, 0, function() { // Links with the class "close" will close parent
				$(this).slideUp(400);
			});
			return false;
		});

	});
</script>

<script type="text/javascript" src="Scripts/jquery.wysiwyg.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".wysiwyg").wysiwyg(); // Applies WYSIWYG editor to any textarea with the class "wysiwyg"
	});
</script>


<script type="text/javascript" src="Scripts/jquery.selectbox-0.5.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.styledselect_form_1').selectbox({
			inputClass : "styledselect_form_1"
		});
	});
</script>

<script type="text/javascript" src="Scripts/facebox.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('a[rel*=modal]').facebox({
			opacity : 0.2
		}); // Applies modal window to any link with attribute rel="modal"
	});
</script>

<script type="text/javascript">
	$(document).ready(function() {
		//Alternating table rows:
		$('table#grid tbody tr:even').addClass("alt-row"); // Add class "alt-row" to even table rows
		$('table#product-table tbody tr:even').addClass("alternate-row"); // Add class "alt-row" to even table rows
	});
</script>
</head>
<body>

	<div id="body-wrapper">
	  <!-- Wrapper for the radial gradient background -->
	  <div id="sidebar">
			<div id="sidebar-wrapper">
				<!-- Sidebar with logo and menu -->
				<h1 id="sidebar-title">
					<a href="#">Simpla Admin</a>
				</h1>
				<!-- Logo (221px wide) -->
				<a href="#"><img id="logo" src="TemplateImages/logo.png"
					alt="Simpla Admin logo" /> </a>
				<!-- Sidebar Profile links -->
				<jsp:include page="ProfileLinks.jsp"></jsp:include>
				<jsp:include page="MainNav.jsp"></jsp:include>
			</div>
	  </div>
	  <!-- End #sidebar -->
	  <div id="main-content">
	    <!-- Main Content Section with everything -->
	    <div class="content-box">
	      <!-- Start Content Box -->
	      <div class="content-box-header">
	        <h3>Product</h3>
	        <ul class="content-box-tabs">
	          <li><a href="#tab1" class="default-tab">Manage products</a></li>
	          <!-- href must be unique and match the id of target div -->
	          <li><a href="#tab2">Create new product</a></li>
	        </ul>
	        <div class="clear"></div>
	      </div>
	      <!-- End .content-box-header -->
	      <div class="content-box-content">
	        <div class="tab-content default-tab" id="tab1">
	          <!-- Start Notifications -->
	    <div class="notification error png_bg"> <a href="#" class="close"><img src="TemplateImages/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
	      <div> Error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero. </div>
	    </div>
	    <!-- End Notifications -->
	          <table id="grid" width="100%">
	            <thead>
	              <tr>                
					<th></th>
	                <th>Product ID</th>
	                <th>Name</th>
	                <th>Quantity</th>
	                <th>Price</th>
					<th>Category</th>
					<th>Status</th>
	                <th>Actions</th>
	              </tr>
	            </thead>
	            <tfoot>
	              <tr>
	                <td colspan="6"><div class="bulk-actions align-left">
	                    <select name="dropdown">
	                      <option value="option1">Choose an action...</option>
	                      <option value="option2">Edit</option>
	                      <option value="option3">Delete</option>
	                    </select>
	                    <a class="button" href="#">Apply to selected</a> </div>
	                  <div class="pagination"> <a href="#" title="First Page">&laquo; First</a><a href="#" title="Previous Page">&laquo; Previous</a> <a href="#" class="number" title="1">1</a> <a href="#" class="number" title="2">2</a> <a href="#" class="number current" title="3">3</a> <a href="#" class="number" title="4">4</a> <a href="#" title="Next Page">Next &raquo;</a><a href="#" title="Last Page">Last &raquo;</a> </div>
	                  <!-- End .pagination -->
	                  <div class="clear"></div></td>
	              </tr>
	            </tfoot>
	            <tbody>
	              <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
	              <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
				  <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
				  <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
				  <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
				  <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
				  <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
				  <tr>                
					<td><a href="#"><img src="TemplateImages/Product06_resized.jpg" width="40px" height="40px"/></a></td>
	                <td>0100001</td>
	                <td><a href="#" title="title">Product 0100001</a></td>
	                <td>10</td>
	                <td>50$</td>
					<td>
						<select name="dropdown" class="small-input">
							<option value="option1">Option 1</option>
							<option value="option2">Option 2</option>
							<option value="option3">Option 3</option>
							<option value="option4">Option 4</option>
	                  	</select>
					</td>
					<td><input type="checkbox" /></td>
	                <td>
	                  <a href="#" title="Edit"><img src="TemplateImages/icons/pencil.png" alt="Edit" /></a> <a href="#" title="Delete"><img src="TemplateImages/icons/cross.png" alt="Delete" /></a> <a rel="modal" href="#showModal" title="Edit Meta"><img src="TemplateImages/icons/hammer_screwdriver.png" alt="Edit Meta" /></a> </td>
	              </tr>
	            </tbody>
	          </table>
	        </div>
	        <!-- End #tab1 -->
	        <div class="tab-content" id="tab2">
	          <form action="#" method="post">
	            <table width="100%" id="tblForm" cellpadding="0" cellspacing="0">
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Product name:</label></td>
	                <td class="tds vAlignTop"><input class="text-input small-input" type="text"/>
	                </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Category:</label></td>
	                <td class="tds vAlignTop">
					  <select class="styledselect_form_1 small-input">
						<option value="">Choose category</option>
						<option value="">Red wine</option>
						<option value="">White wine</option>
						<option value="">Clients</option>
						<option value="">News</option>
					</select>
	                </td>
	                <td class="tdt vAlignMiddle"><span class="input-notification success png_bg">Successful message</span> </td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Quantity:</label></td>
	                <td class="tds vAlignTop"><input class="text-input small-input" type="text"/>
	                </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Price:</label></td>
	                <td class="tds vAlignTop"><input class="text-input small-input" type="text"/>
	                </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Short desc:</label></td>
	                <td class="tds vAlignTop"><input class="text-input medium-input" type="text"/>
	                </td>
	                <td class="tdt vAlignMiddle"><span class="input-notification error png_bg">Error message</span> </td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Status:</label></td>
	                <td class="tds vAlignMiddle"><input type="checkbox" name="checkbox2" />
	                  Available </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Image:</label></td>
	                <td class="tds vAlignTop">
						<input class="file_1 text-input small-input" name="fakeUpload"/>
	                  <div class="uploadDiv">
	                    <input type="file" class="file_1 fileInput" onchange="this.form.fakeUpload.value=this.value;"/>
	                  </div>				
					</td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="vAlignTop"><label>Long desc</label></td>
	                <td colspan="2"><textarea class="text-input textarea wysiwyg" id="textarea" name="textfield" cols="79" rows="15"></textarea>
	                </td>
	              </tr>
	              <tr>
	                <td colspan="3"><input class="button" type="submit" value="Submit" />
	                  <input class="button" type="reset" value="Reset" />
	                </td>
	              </tr>
	            </table>
	          </form>
	          <div class="clear"></div>
	          <!-- End .clear -->
	          </form>
	        </div>
	        <!-- End #tab2 -->
	      </div>
	      <!-- End .content-box-content -->
	    </div>
	    <!-- End .content-box -->
	    <div class="clear"></div>
	    <!-- Start Notifications -->
	    <div class="notification attention png_bg"> <a href="#" class="close"><img src="TemplateImages/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
	      <div> Attention notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero. </div>
	    </div>
	    <div class="notification information png_bg"> <a href="#" class="close"><img src="TemplateImages/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
	      <div> Information notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero. </div>
	    </div>
	    <div class="notification success png_bg"> <a href="#" class="close"><img src="TemplateImages/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
	      <div> Success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero. </div>
	    </div>
	    <div class="notification error png_bg"> <a href="#" class="close"><img src="TemplateImages/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
	      <div> Error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero. </div>
	    </div>
	    <!-- End Notifications -->
	  </div>
	  <!-- End #main-content -->
	</div>
	
	
	<div id="showModal" style="display: none">
	  <form action="#" method="get">
	            <table width="100%" id="tblForm" cellpadding="0" cellspacing="0">
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Product name:</label></td>
	                <td class="tds vAlignTop"><input class="text-input small-input" type="text"/>
	                </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Category:</label></td>
	                <td class="tds vAlignTop"><select name="dropdown" class="small-input">
	                    <option value="option1">Option 1</option>
	                    <option value="option2">Option 2</option>
	                    <option value="option3">Option 3</option>
	                    <option value="option4">Option 4</option>
	                  </select>
	                </td>
	                <td class="tdt vAlignMiddle"><span class="input-notification success png_bg">Successful message</span> </td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Quantity:</label></td>
	                <td class="tds vAlignTop"><input class="text-input small-input" type="text"/>
	                </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Price:</label></td>
	                <td class="tds vAlignTop"><input class="text-input small-input" type="text"/>
	                </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Short desc:</label></td>
	                <td class="tds vAlignTop"><input class="text-input medium-input" type="text"/>
	                </td>
	                <td class="tdt vAlignMiddle"><span class="input-notification error png_bg">Error message</span> </td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Status:</label></td>
	                <td class="tds vAlignMiddle"><input type="checkbox" name="checkbox2" />
	                  Available </td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="tdf vAlignMiddle"><label>Image:</label></td>
	                <td class="tds vAlignTop"><input class="file_1 text-input small-input" name="fakeUpload1"/>
	                  <div class="uploadDiv">
	                    <input type="file" class="file_1 fileInput" onchange="this.form.fakeUpload1.value=this.value;"/>
	                  </div></td>
	                <td class="tdt"><div class="error-left"></div>
	                  <div class="error-inner">This field is required.</div></td>
	              </tr>
	              <tr>
	                <td class="vAlignTop"><label>Long desc</label></td>
	                <td colspan="2"><textarea class="text-input textarea wysiwyg" id="textarea" name="textfield" cols="79" rows="10"></textarea>
	                </td>
	              </tr>
	              <tr>
	                <td colspan="3"><input class="button" type="submit" value="Submit" />
	                  <input class="button" type="reset" value="Reset" />
	                </td>
	              </tr>
	            </table>
	          </form>
	</div>
</body>
</html>